import React, { Component } from 'react';
// 组件通信-子传父
// 方式1: 给子组件绑定ref 属性, 在父组件中通过ref 获取子组件实例, 然后获取该实例上的所有的数据和方法

// 方式2: 在子组件上定义一个方法, 该方法的返回值为当前子组件上的state数据, 然后在父组件中通过ref
// 访问子组件实例上的方法,调用执行, 这样在父组件中就获取到了子组件上的数据了
import Son from './Son';
import { createRef } from 'react';
export default class Father extends Component {
    state = {
        heroArr: [],
        count: 0
    }
    ref1 = createRef();
    render() {
        return (
            <div>

                {/* 使用子组件 */}
                <Son ref={this.ref1}></Son>
                <ul>
                    {
                        this.state.heroArr.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
                <p>count:{this.state.count}</p>
                {/* {
                    console.log(1, this.state.heroArr)
                } */}
            </div>
        )
    };
    componentDidMount() {
        console.log(2, this.ref1.current.state.nameArr)
        this.setState({
            heroArr: this.ref1.current.state.nameArr,
            count: this.ref1.current.giveDataToFatherFn()
        })


    }
}
